<template>
	<view>
		<view class="order-card" >
		
			<view class="order-title">
				<text>订单编号:{{orderId}}</text>
			</view>
			
			<view class="sku-block" v-for="item in orderList" :key="item.id">
				<image :src="item.productPic" mode=""></image>
				<view class="info">
					<view class="content-top">
						<text class="title">{{item.productName}}</text>
						<text class="price">¥{{item.productPrice}}元</text>
					</view>
					<view class="content-center">
						<text>编号:{{item.productId}}</text>
						<text>数量x{{item.productQuantity}}</text>
					</view>
					<view class="content-bottom">
						<text v-for="ele in item.productAttr" :key="ele.value" style="margin-right: 6rpx;">
							{{ele.key}}:{{ele.value}}
						</text>
					</view>
				</view>
			</view>
			
			<view class="total-price" v-if="orderList.length!=0">合计:{{orderList[0].productPrice*orderList[0].productQuantity}}元</view>
			
		</view>
		
		<view class="per">
			<view class="title">请选择退单数量</view>
			<text v-if="orderList.length!=0">{{orderList[0].productQuantity}}</text>
		</view>
		<view class="per">
			<view class="title">请输入退货原因</view>
			<input type="text" placeholder="请输入退货原因" v-model="reason"/>
		</view>
		<view class="per">
			<view class="title">请选择退货地址</view>
			<picker mode="selector" :range="addressList" @change="selectAddress" range-key="addressName">
				<view>{{currentAddress}}</view>
			</picker>
		</view>
		<view class="per">
			<view class="title">请输入问题描述</view>
			<textarea  placeholder="请输入问题描述" class="text-area" v-model="description" />
		</view>
		<view class="per upload">
			<view>
				<view class="title">
					<view style="font-weight: 700;">温馨提示</view>
					<view >上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张</view>
				</view>
				<view class="uploadImg">
					<view class="uploadBtn" @tap="selectImg">
						<image src="../../../static/images/icons/upload.png" mode=""></image>
						上传图片
					</view>
					
					<view class="imgList">
						<view class="imgBox"  v-for="(item,index) in imgs" :key="index">
							<image :src="item"></image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<button type="default" class="btn-sub" @tap="doBack">提交</button>
	</view>
</template>

<script>
	import { getPreOrderById , getCompanyAddrss , addOrderReturnApply} from "../../../api/my/orderback/orderback.js";
	import baseUrl from "../../../api/baseUrl.js";
	export default {
		data() {
			return {
				// 上个页面传入的两个id，提交退款时候用
				orderId:'',
				orderItemId:'',
				companyAddressId:'',
				description:'',
				reason:'',
				// 图片地址信息
				imgs:[],
				// 订单数据展示
				orderBase:{},
				orderList:[],
				// 地址列表
				addressList:[],
				currentAddress:'请选择退货地址',
			};
		},
		methods:{
			// 初始化获取数据
			init(id){
				// 订单数据
				getPreOrderById(id).then(res=>{
					
					res.data.orderItems.forEach(ele=>{
						ele.productAttr = JSON.parse(ele.productAttr);
					})
					console.log(res);
					var result = res.data.orderItems.find(ele =>ele.id == this.orderItemId);
					res.data.orderItems = [result];
					
					this.orderBase = res.data.orderBase;
					this.orderList = res.data.orderItems;
					console.log(this.orderList);
				});
				// 地址数据
				getCompanyAddrss().then(res=>{
					console.log(res);
					this.addressList = res.data.items;
				})
			},
			// 选择地址
			selectAddress(e){
				var index = e.detail.value;
				this.currentAddress = this.addressList[index].addressName;
				// console.log(e.detail.value);
				this.companyAddressId = this.addressList[index].id;
			},
			
			// 选择图片
			selectImg(){
				uni.chooseImage({
					count:3,
					success:res=> {
						console.log(res);
						var picList = res.tempFiles;
						var result = picList.some(ele=>ele.size>1024*1024);
						if(result){
							uni.showToast({
								title:'单张图片大小不能超过1M！',
								icon:'none'
							})
							return
						}else if(picList.length>3){
							uni.showToast({
								title:'上传图片个数不能超过三张！',
								icon:'none'
							})
							return
						}else if(picList.length + this.imgs.length > 3){
							uni.showToast({
								title:'上传图片个数不能超过三张！',
								icon:'none'
							})
							return
						}
						this.imgs.push(...res.tempFilePaths) ;
						
					}
				})
			},
			uploadImg(){
				var realImgList = [];
				
				this.imgs.forEach(ele=>{
					var promise = new Promise((resolve)=>{
						
							uni.uploadFile({
							url: baseUrl + "/lejuClient/orderReturn/uploadImg",
							filePath:ele,
							name:'file',
							success:res=> {
								// console.log(res);
								var imgUrl = JSON.parse(res.data).data.fileUrl;
								resolve(imgUrl)
							}
						})
						
					})
					realImgList.push(promise);
				})
				return realImgList; //其中包含了三个promise对象
			},
			// 提交退款
			 doBack(){
					// var result = await this.uploadImg();
					// console.log(result);
					Promise.all(this.uploadImg()).then(res=>{
						
							var orderReturnObj = {
								"companyAddressId": this.companyAddressId,
								"count": this.orderList[0].productQuantity,
								"description": this.description,
								"orderId": this.orderId,
								"orderItemId": this.orderItemId,
								"proofPics":res.join(","),
								"reason": this.reason
							};
							// console.log(orderReturnObj);
							addOrderReturnApply(orderReturnObj).then(res=>{
								// console.log(res)
								uni.showToast({
								    title: '申请退款成功',
								    icon: 'success',
									duration:1000,
									success() {
										setTimeout(function(){
											uni.navigateBack({
												delta:1
											})
										},1000)
									}
								});
								
							})
						
					})
					
					
					
			},
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.orderItemId = options.orderItemId;
		},
		onShow() {
			this.init(this.orderId);
		}
	}
</script>

<style lang="scss" scoped>
// order-card
	.order-card {
		width: 672rpx;
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #3e3e3e;
		 .order-title {
			 line-height: 32rpx;
			 display: flex;
			 justify-content: space-between;
			 border-bottom: 2rpx solid #f1ece7;
			 padding-bottom: 30rpx;
		 }
		 .sku-block {
			 display: flex;
			 justify-content: flex-start;
			 border-bottom: 2rpx solid #f1ece7;
			 padding: 30rpx 0;
			  image {
				  width: 162rpx;
				  height: 162rpx;
				  flex-shrink: 0;
				  background-color: #8f8f94;
			  }
			  .info {
				  width: 470rpx;
				  margin-left: 28rpx;
				   .content-top {
					   display: flex;
					   justify-content: space-between;
					   align-items: center;
					   font-size: 26rpx;
					   line-height: 74rpx;
					    .title , .price{
							color: #3e3e3e;
						}
				   }
				   .content-center {
					   font-size: 22rpx;
					   color: #8d8d8d;
					   line-height: 30rpx;
					   margin-top: 4rpx;
					   display: flex;
					   justify-content: space-between;
					   align-items: center;
				   }
				   .content-bottom {
					   font-size: 22rpx;
					   color: #8d8d8d;
					   line-height: 30rpx;
					   margin-top: 4rpx;
				   }
			  }
		 }
		 // 合计
		 .total-price {
			 font-size: 26rpx;
			 line-height: 36rpx;
			 text-align: right;
			 margin-top: 14rpx;
		 }
	}
	
	.per {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 30rpx;
		background: #fff;
		border-bottom: 1Px solid #F1ECE7;
		 .title {
			 font-size: 24rpx;
		 }
		 input {
			 font-size: 24rpx;
			 text-align: right;
		 }
		 .text-area {
			 width: 50%;
			 font-size: 24rpx;
		 }
		 .uploadImg {
			 display: flex;
			 align-items: center;
			  .uploadBtn {
				  display: flex;
				  align-items: center;
				  justify-content: center;
				  flex-wrap: wrap;
				  flex-direction: column;
				  font-size: 20rpx;
				  color: #666;
				  width: 120rpx;
				  height: 120px;
				   image {
					   width: 58rpx;
					   height: 58rpx;
				   }
			  }
			  .imgList {
				  display: flex;
				  align-items: center;
				   .imgBox {
					   width: 120rpx;
					   height: 120rpx;
					   background: rgba(0, 0, 0, 0.1);
					   border-radius: 8rpx;
					   margin-left: 20rpx;
					   position: relative;
					    image {
							width: 100%;
							height: 100%;
						}
				   }
			  }
		 }
	}
	
	
	// 提交退款按钮
	.btn-sub {
		margin: 120rpx auto;
		width: 520rpx;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		background: #354E44;
		color: #fff;
		border-radius: 28rpx;
	}
</style>
